<template>
  <div>
    <h1>4、$nextTick的使用场景</h1>
    <!-- <button v-show="isShow" @click="btn">点我</button>
    <input ref="inp" v-show="!isShow" type="text"> -->
    <button v-if="isShow" @click="btn">点我</button>
    <input ref="inp" v-else type="text" @blur="isShow=!isShow" >
  </div>
</template>

<script>
export default {
  data(){
    return {
      isShow: true
    }
  },
  methods:{
    btn(){
      this.isShow = !this.isShow;
      // focus() 自动聚焦方法
      // 没有自动获取焦点，因为DOM渲染是异步的
      // this.$refs.inp.focus();
      // 如何解决？答：通过$nextTick的回到函数获取到更新后的DOM再调用聚焦方法即可
      this.$nextTick(()=>{
        this.$refs.inp.focus();
      })
    }
  }
}
</script>

<style>

</style>